import { View } from '@tarojs/components';
import React from 'react';
import './Checkbox.scss';

interface IZbRadioAnswerProps {
  item: { key: string; value: string }[];
}

const ZbCheckboxAnswer = (props: IZbRadioAnswerProps) => {
  const { item } = props;
  const [curSelect, setCurSelect] = React.useState<string[]>([]);

  const onSelect = (e: any, key: string) => {
    e.stopPropagation();
    let _curSelect = curSelect;
    const idx = curSelect.findIndex((v) => v === key);
    if (idx === -1) {
      // 不存在
      _curSelect.push(key);
    } else {
      // 存在 则取消选中
      _curSelect = _curSelect.filter((v) => v !== key);
    }
    setCurSelect([..._curSelect]);
  };

  return (
    <View className="checkbox-answer">
      {item.map((it: { key: string; value: string }) => (
        <View
          key={it.key}
          className="pb-3 flex self-start"
          onClick={(e) => {
            onSelect(e, it.key);
          }}
        >
          <View
            className={`checkbox-answer-item text-xs ${
              curSelect.length > 0 &&
              curSelect.findIndex((v) => v === it.key) > -1
                ? 'text-white bg-green-700'
                : 'text-green-600'
            } `}
          >
            {it.key}
          </View>
          <View className="text-lg ">{it.value}</View>
        </View>
      ))}
    </View>
  );
};

export default ZbCheckboxAnswer;
